<template>
  <div>
    <!-- data picker {{ mVal }} -->

    <a-date-picker
      v-model:value="mVal"
      :show-time="showTime"
      :placeholder="placeholder"
      style="width: 90%"
      @change="onChange"
      @ok="onOK"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'

import dayjs from 'dayjs'

const props = defineProps(['modelValue', 'placeholder', 'showTime'])
const emit = defineEmits(['update:modelValue', 'change'])

const date_format = computed(() =>
  props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
)

const mVal = computed({
  get() {
    const val = props.modelValue
    if (val) {
      return dayjs(val, date_format.value)
    }

    return undefined
  },
  // eslint-disable-next-line no-unused-vars
  set(value) {
    // console.log(value)
    // emit('update:modelValue', dateString)
  }
})

// eslint-disable-next-line no-unused-vars
function onOK(date, dateString) {
  //   console.log('onOK', date, dateString)
  //   emit('change', dateString)
}

function onChange(date, dateString) {
  console.log('onChange', date, dateString)
  emit('change', dateString)
}
</script>

<style scoped></style>
